<template>
  <div>
        <Card>
            <div slot="title" >
                <Button v-if="btnp.xxgli_fsxx" @click="modal_send_msg=true" class="zh-hollow" type="primary" icon="paper-airplane">发送消息</Button>
            </div>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="8">
                        <FormItem label="用户">
                            <Input v-model="formItem.mobile" placeholder="姓名/手机号" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="用户类型">
                            <Select v-model="formItem.customerType" filterable>
                                <Option  v-for="item in userTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="发送状态">
                            <Select v-model="formItem.is_success" filterable>
                                <Option  v-for="item in sendTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                <!-- </Row>
                <Row :gutter="10" type="flex" justify="space-between" align="middle"  > -->
                    <Col span="12">
                        <FormItem label="发送时间">
                            <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择发送时间"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                
                <Row :gutter="10" >
                <Col span="8" offset="16"  style="text-align:right;">
                    <Button @click="searchGetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                </Col>
                
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="pageNumber" :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal title="发送消息" loading v-model="modal_send_msg" ok-text="发送" cancel-text="放弃操作" :mask-closable="false" class="zh-modal-form">
            <Form  :label-width="80" style="padding:15px 30px;">
                <FormItem label="用户类型">
                    <Select v-model="msgForm.userType" >
                        <Option  v-for="item in shotUserTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="用户手机号">
                    <RadioGroup v-model="mobile_radio" vertical>
                        <Radio label="mobile" style="marginBottom:10px;">
                            <Input v-if="mobile_radio==='mobile'" @on-change="mobileChange" v-model="msgForm.mobile" clearable></Input>
                            <Input v-else v-model="msgForm.mobile" disabled ></Input>
                        </Radio>
                        <Radio label="all">全部用户</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="用户姓名" v-if="mobile_radio!=='all'">
                    <Input  :readonly="changeNameReadonly" :maxlength="11"  v-model="msgForm.name" placeholder="姓名/手机号"></Input>
                </FormItem>
                <FormItem label="消息标题">
                    <Input v-model="msgForm.title" :maxlength="20" clearable></Input>
                </FormItem>
                <FormItem label="消息内容">
                    <Input clearable type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" v-model="msgForm.content" ></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <div class="zh-flex zh-flex-5" >
                    <Button @click="modal_send_msg=false" type="ghost">放弃操作</Button>
                    <Button @click="sendMessage" class="zh-hollow" type="primary" >发送</Button>
                </div>
            </div>
        </Modal>
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getMessageTable,sendMsg} from '@/libs/post.js'
import {getUserInfoByMobile} from '@/libs/get.js'
export default {
    name:'message',
    data(){
        return {
            btnp:{},
            btn:{
                xxgli_fsxx:false
            },
            uuid:'',
            canSend:true,
            changeNameReadonly:false,
            msgForm:{
                userType:'',
                mobile:'',
                name:'',
                title:'',
                content:''
            },
            mobile_radio:'mobile',
            modal_send_msg:false,
            loading:true,
            total:0,
            timeRange:[],
            pageSize:10,
            pageNumber:1,
            formItem:{
                mobile:'',
                startTime  :'',
                is_success:'',
                startTime:'',
                endTime:'',
                customerType:''
            },
            shotUserTypeList:[
                {
                    label:'报修人',
                    value:'01'
                },
                {
                    label:'运维人员',
                    value:'02'
                } 
            ],
            userTypeList:[
                {
                    label:'全部',
                    value:'全部'
                },
                {
                    label:'报修人',
                    value:'01'
                },
                {
                    label:'运维人员',
                    value:'02'
                }                                
            ],
            sendTypeList:[
                {
                    label:'全部',
                    value:'全部'
                },
                {
                    label:'成功',
                    value:'0'
                },
                {
                    label:'失败',
                    value:'1'
                },
            ],
            columns:[
                {
                    key:'type',
                    title:'用户类型',
                    minWidth:120
                },
                {
                    key:'custName',
                    title:'姓名',
                    minWidth:100
                },
                {
                    key:'mobile',
                    title:'手机号',
                    align:'center',
                    minWidth:130
                },
                {
                    key:'title',
                    title:'消息标题',
                    minWidth:150
                },
                {
                    key:'content',
                    title:'消息内容',
                    minWidth:400
                },
                {
                    key:'time',
                    title:'发送时间',
                    align:'center',
                    minWidth:150
                },
                {
                    key:'isSuccess',
                    title:'发送状态',
                    minWidth:100,
                    align:'center',
                    fixed:'right',
                    render:(h,params)=>{
                        let tcolor="#000";
                        if(params.row.isSuccess!=='成功'){
                            tcolor='#EA7004';
                        }
                        return h('p',{
                            style:{
                            color:tcolor
                            }
                        },params.row.isSuccess)
                
                    }
                }
                
            ],
            data:[]
        };
    },
    methods:{
        async sendMessage(){
            if(this.canSend){
                this.canSend=false;
                if(!this.msgForm.userType){
                    this.$Notice.error({
                        desc:'请选择发送消息对象的类型'
                    })
                }else if(this.mobile_radio==='mobile'&&!this.msgForm.mobile){
                    this.$Notice.error({
                        desc:'请输入手机号'
                    })
                }else if(!this.msgForm.title){
                    this.$Notice.error({
                        desc:'请输入消息标题'
                    })
                }else if(!this.msgForm.content){
                    this.$Notice.error({
                        desc:'请输入消息内容'
                    })
                }else{
                    let customerType=this.msgForm.userType;
                    let users=this.mobile_radio==='mobile'?this.uuid:'all';
                    let {title,content}=this.msgForm;
                    let res=await sendMsg({customerType,users,title,content});
                    let response=res.data;
                    if(response.code===200){
                        this.$Notice.success({
                            desc:'消息发送成功'
                        });
                        this.getTable();
                        this.modal_send_msg=false;
                    }else{
                        this.$Notice.error({
                            title: '发送失败',
                            desc:response.msg
                        });
                       
                    }
                }
                this.getTable();
                this.canSend=true;
            }
        },
        async mobileChange(e){
            this.changeNameReadonly=false;
            if(this.msgForm.mobile.length===11){
                const reg=this.$store.state.app.mobileReg;
                if(!reg.test(this.msgForm.mobile)){
                    this.$Notice.error({
                        desc:'手机号格式错误'
                    })
                }else{
                    let res=await getUserInfoByMobile(this.msgForm.mobile);
                    let response=res.data;
                    if(response.code===200){
                        if(!!response.data.name){
                            this.msgForm.name=response.data.name;
                            this.uuid=response.data.uuid;
                            this.changeNameReadonly=true;
                        }else{
                            this.$Notice.error({
                                desc:'该手机号不存在'
                            })
                        }
                        
                    }else{
                        this.$Notice.error({
                            desc:response.msg
                        });
                    }
                }
                
            }
        },
        searchGetTable(){
            this.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                form[key]='';
                }
            }
            if(!!this.timeRange[0]&&this.timeRange.length>0){
                form.startTime=util.time1(this.timeRange[0]);
                form.endTime=util.time1(this.timeRange[1]);
            }else{
                form.startTime='';
                form.endTime='';
            }
            form.pageSize=this.pageSize;
            form.pageNumber=this.pageNumber;
            let res=await getMessageTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows.map(item=>{
                    item.time=item.created.slice(0,16);
                    return item
                })
                this.loading=false;
            }else{
                this.$Notice.error({
                title: '失败',
                desc:response.msg
                });
                return false
            }
        },
        pageSizeChange(size){
        //回到第一页
            this.pageNumber=1;
            this.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.pageNumber=number;
            this.getTable();
        },
    },
    watch:{
        modal_send_msg:function(){
            if(!this.modal_send_msg){
                this.msgForm={
                    userType:'',
                    mobile:'',
                    name:'',
                    title:'',
                    content:''
                };
                this.mobile_radio='mobile'
            }
        }
    },
    created(){
        this.getTable();
        this.btnp=util.bpower(this,this.btn);
    }
}

</script>
<style lang='scss' >
</style>